<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>vue对表单元素的处理:1.获取输入框的值；2.设置输入框的值</h2>
    <form method="GET">
      <p>input框</p>
      <input type="password" name="account" v-model="val1">
      <p>{{val1}}</p>
      <hr>
      <p>textarea标签</p>
      <textarea v-model="val2" name="pwd"></textarea>
      <p>{{val2}}</p>
      <hr>
      <p>性别</p>
      <span>男</span>
      <input type="radio" name="sex" value="male">
      <span>女</span>
      <input type="radio" name="sex" value="female">
      <p>你的性别是：{{val3}}</p>
      <hr>
      <p>爱好</p>
      <span>唱</span>
      <input type="checkbox" name="hobby" value="sing" v-model="val4">
      <span>跳</span>
      <input type="checkbox" name="hobby" value="dance" v-model="val4">
      <span>rap</span>
      <input type="checkbox" name="hobby" value="rap" v-model="val4">
      <span>打篮球</span>
      <input type="checkbox" name="hobby" value="basketball" v-model="val4">
      <p>你的爱好是：{{val4}}</p>
      <button @click="basketball">教练我想打篮球</button>
      <hr>
      <p>收货地址</p>
      <select name="" id="" v-model="val5">
        <option value="1">京</option>
        <option value="2">津</option>
        <option value="3">沪</option>
        <option value="4">渝</option>
      </select>
      <p>你的地址是：{{val5}}</p>
      <hr>
      <p>工作地址</p>
      <select name="" id="" v-model="val6" multiple>
        <option value="1">京</option>
        <option value="2">津</option>
        <option value="3">沪</option>
        <option value="4">渝</option>
      </select>
      <p>你的地址是：{{val6}}</p>
      <hr>
      <p>请选择正确选项：</p>
      <div v-for="(option,index) in radioArr">
        <span>{{option.option}}</span>
        <input type="radio" name="radio1" :value="option.text" v-model="val7">
      </div>
      <p>{{val7}}</p>
    </form>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        val1: '这是input的默认值',
        val2: '',
        val3: 'male',
        val4: [],
        val5: '3',
        val6: [],
        val7: '',
        radioArr: [
          {
            option: 'A',
            text: '我是选项A的内容'
          },
          {
            option: 'B',
            text: '我是选项B的内容'
          },
          {
            option: 'C',
            text: '我是选项C的内容'
          },
          {
            option: 'D',
            text: '我是选项D的内容'
          }
        ]
      },
      methods: {
        basketball() {
          this.val4.push('basketball');
        }
      },
    })
  </script>
</body>

</html>